/*
 * @Title: 商品详情
 * @Created by: ycq
 */
<template>
	<view :class="toBuy||showFx||showMask?'shop-detail':''">
		<view class="mask" v-if='showMask'></view>
		<comHeader :config="navConfig"/>
		<view class="banner">
			<view class="dot-main">
				<text>{{current+1}}/{{bannerData.length}}</text>
			</view>
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="change">
			    <swiper-item v-for="(item,index) in bannerData" :key='index'>
			        <view class="swiper-item" >
						<image :src='item.img' mode=""></image>
			        </view>
			    </swiper-item>
			</swiper>
			<view class="head">
				<!-- <image class="back" src="/static/fanhui-black.png" @click="back" mode=""></image> -->
				<image class="right-more" src="/static/shop/right-more.png" mode=""></image>
			</view>
		</view>
		<view class="body">
			<view style="width: 750upx;height: auto;background: #FFFFFF;padding-bottom: 20upx;">
				<view class="title-box">
					<text class="title">
					故宫古风中国风口红长相思持久保湿防水 不脱色哑光情人节礼物故宫纪念品	
					</text>
					<view class="fenxiang"  @click="togglePopup('bottom','share')">
						<image src="/static/shop/share.png" mode=""></image>
						<text>分  享</text>
					</view>
				</view>
				<view class="price">
					<text>￥256</text>
				</view>
				<view class="xg">
					<view class="xg-item">
						<image src="/static/shop/xiaoliang.png" mode=""></image>
						<text>销量：2563</text>
					</view>
					<view class="xg-item">
						<image src="/static/shop/guanzhu.png" mode=""></image>
						<text>关注：658</text>
					</view>
				</view>
			</view>
			<view class="peisong">
				<view class="label">
					配送
				</view>
				<view class="peisong-info"> 
					<text>发货：郑州	 </text>
					<view class="shu"></view>
					<text>快递：免运费</text>
				</view>
			</view>
			<view class="youhui">
				<view class="label">
					优惠
				</view>
				<view class="youhui-info"> 
					<view class="youhui-item">
						---优惠
					</view>
				</view>
			</view>
			<view class="size" @click="addCar">
				<view class="label">
					选择
				</view>
				<view class="size-info" > 
					<text class="cm">选择颜色/尺码</text>
					<image class="cm-more" src="/static/jiantou.png" mode=""></image>
					<view class="size-list">
						<image src="/static/glBan.png" mode=""></image>
						<image src="/static/glBan.png" mode=""></image>
						<image src="/static/glBan.png" mode=""></image>
						<text>更多选择</text>
					</view>
				</view>
			</view>
			<view class="pingjia" @click="toPingjia">
				<view class="pingjia-head">
					<text class="pingjia-label">宝贝评价（123）</text>
					<uniIcon type="arrowright" style='float: right;margin-right: 20upx;' color='#55A0FF' size="20"/>
					<text class="seeAll">查看全部</text>
				</view>
				<view class="pinglun-user">
					<image src="/static/banner.png" mode=""></image>
					<text>1****5</text>
				</view>
				<text class="pinglun-text">
					款式简约大方，做工精细，价格也太实惠了，买到就是赚到了很
				</text>
			</view>
			<view class="shop">
				<image class="shop-img" src="/static/glBan.png" mode=""></image>
				<view class="shop-info">
					<view style="float: left;width: 550upx;">
						<text class="shop-name">故宫景区自营店</text>
						<view class="shop-tip">景区店</view>
						<view class="stars">
							<image src="/static/dengji.png" v-for="index in 5" :key='index' mode=""></image>
						</view>
					</view>
					<view class="shop-btn">进店看看</view>
				</view>
				<view class="shop-tip-list">
					<view  class="shop-tip-item">
						<text class="bbms">宝贝描述</text>
						<text class="fen">4.8</text>
						<view class="gao">
							高
						</view>
					</view>
					<view  class="shop-tip-item">
						<text class="bbms">卖家服务</text>
						<text class="fen">4.8</text>
						<view class="gao">
							高
						</view>
					</view>
					<view  class="shop-tip-item">
						<text class="bbms">卖家服务</text>
						<text class="fen">4.8</text>
						<view class="di">
							低
						</view>
					</view>
				</view>
			</view>
			<view class="goodsInfo">
				<view class="list-title">
					<span class='shu'></span>
					<span>商品详情</span>
				</view>
				<image src="/static/shop/xq1.png" mode="widthFix"></image>
				<image src="/static/shop/xq2.png" mode="widthFix"></image>
			</view>
			<view class="c-title">
				<image src="/static/shop/bl.png" mode=""></image>
				<text>同款商品推荐</text>
				<image src="/static/shop/bl.png" mode=""></image>
			</view>
			<view class="goods-list">
				<view class="goods-item" v-for='(item,index) in goodsData' :key='index'   @touchmove="gtouchmove()" @touchstart='tcStart(index)' @touchend.prevent="touchend">
					<!-- <view class="other-btn" @click="openMask(index)">
						<view class="other-btn-dot"></view><view class="other-btn-dot"></view><view class="other-btn-dot"></view>
					</view> -->
					<view class="item-btns" v-if="openIndex == index"  >
						<view class="item-btn">
							<image src="/static/nolike.png"></image>
							<text>不感兴趣</text>
						</view>
						<view class="item-btn">
							<image src="/static/pingbi.png"></image>
							<text>屏蔽:扇子</text>
						</view>
						<view class="item-btn">
							<image src="/static/bushi.png"></image>
							<text>图片引起不适</text>
						</view>
						<view class="item-btn">
							<text>找同款</text>
						</view>
					</view>
					<view><image class="item-img" :src="item.img"></image>
					<text class="goods-title">
						{{item.title}}
					</text>
					<text class="goods-prize" >￥{{item.prize}}<text class="p-dot">{{item.prizeD}}</text></text>
					<text class="goods-buyNum" >{{item.buyNum}}人付款</text></view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-item">
					<view class="bottom-img">
						<image src="/static/shop/shop.png" mode=""></image>
					</view>
					<text>店铺</text>
				</view>
				<view class="bottom-item">
					<view class="bottom-img">
						<image src="/static/shop/kefu.png" mode=""></image>
					</view>
					<text>客服</text>
				</view>
				<view class="bottom-item" >
					<view class="bottom-img">
						<image src="/static/shop/coll.png" mode=""></image>
					</view>
					<text>收藏</text>
				</view>
				<view class="bottom-btn-1" @click="addCar">加入购物车</view>
				<view class="bottom-btn-2" @click="buyNow">立即购买</view>
			</view>
		</view>
		
		<BuyNow v-if='toBuy' :config='buyConfig'></BuyNow>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import BuyNow from '@/components/BuyNow.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				toBuy:false,
				showFx:false,
				openIndex:null,
				type: '',//uniPopup组件类型
				buyConfig:{
					buyType:'add'
				},
				navConfig:{
					isFixed:false,
					comScroll:400,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				goodsData:[
					{
						title:'宫廷古风中国风口红 长相思持久保湿防水',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:123123
					},
					{
						title:'国粹京剧脸谱戏曲Q版人物吊坠书签金属创意古风',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1223
					},
					{
						title:'中国特色礼物送老外北京特色工艺品京剧脸谱摆件商务外事出国礼品',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1564
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333
					}
				],
				showMask:false,
				bannerData:[
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
				],
				current: 0
				
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			addCar(){
				this.buyConfig.buyType = 'add'
				this.toBuy = true;
				document.body.style.overflow = 'hidden'
				// this.showMaskFun();
			},
			buyNow(){
				this.buyConfig.buyType = 'buy'
				this.toBuy = true;
				document.body.style.overflow = 'hidden'
				// this.showMaskFun();
			},
			closeBuy(){
				this.toBuy = false;
				document.body.style.overflow = 'scroll'
				// this.hideMaskFun();
			},
			showMaskFun(){
				this.showMask = true
			},
			hideMaskFun(){
				this.showMask = false
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toCar(){
				uni.navigateTo({
					url:'buyCar'
				})
			},
			toPingjia(){
				uni.navigateTo({
					url:'/pages/common/evaluation'
				})
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				document.body.style.overflow = 'scroll'
				this.$refs[type].close()
			},
			tcStart(index){
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				if(this.openIndex != index){
					this.Loop = setTimeout(function() {
						this.openMask(index)
						this.isMask = true
					}.bind(this), 500);
				}else{
					this.openMask(index)
				}
			},
			touchend() {
				clearTimeout(this.Loop);
				if (this.Loop != 0 && this.isMask == false && !this.isMoving) {
					this.toDetail()
				 }
				  
				this.isMoving = false
				this.isMask = false
			},
			gtouchmove(){
				this.isMoving = true
			    clearTimeout(this.Loop);//清除定时器;
			},
			openMask(index){
				if(this.openIndex != index){
					this.openIndex = index
				}else{
					this.openIndex = null
				}
			},
		},
		components: {
			BuyNow,
			uniIcon,
			uniPopup
		},
	}
</script>

<style scoped>
	.shop-detail{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 25;
		background: rgba(0,0,0,0.3);
	}
	.banner{
		width: 750upx;
		height: 930upx;
		background: #007AFF;
		position: relative;
	}
	.head{
		width: 750upx;
		height: 60upx;
		top: 63upx;
		position: absolute;
	}
	.back{
		width: 20upx;
		min-width: 20px;
		margin-top: 10upx;
		left: 24upx;
		min-height: 20px;
		height: 20upx;
	}
	.right-more{
		width: 60upx;
		height: 60upx;
		float: right;
		margin-right: 28upx;
	}
	
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.swiper-item image{
		width: 100%;
		height: 100%;
	}
	.dot-main {
		width:111upx;
		height: 30upx;
		top:877upx;
		position: absolute;
		z-index: 20;
		right:25upx;
		background: rgba(0,0,0,0.3);
		border-radius: 20upx;
	}
	.dot-main text{
		width: 111upx;
		height: 30upx;
		line-height: 30upx;
		font-size: 24upx;
		color: #FFFFFF;
		
		display: block;
		text-align: center;
	}
	.title-box{
		height: 70upx;
		width: 750upx;
		margin-top: 20upx;
	}
	.title{
		width: 505upx;
		height: 70upx;
		margin-left: 28upx;
		font-weight: bold;
		font-size: 28upx;
		float: left;
		display: block;
	}
	/* 商品信息 */
	.body{
		width: 750upx;
		height: auto;
		padding-bottom: 98upx;
		background: #F6F6F6;
		overflow-x: hidden;
	}
	.fenxiang{
		width: 161upx;
		float: right;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		height: 60upx;
		border-radius: 30upx 0 0 30upx;
		margin-top: 10upx;
	}
	.fenxiang text{
		color: #FFFFFF;
		font-size: 28upx;
		float: left;
		line-height: 60upx;
		margin-left: 20upx;
	}
	.fenxiang image{
		width: 26upx;
		height: 26upx;
		margin-left: 25upx;
		margin-top: 17upx;
		float: left;
	}
	.price{
		width: 750upx;
		margin-top: 30upx;
		height: 60upx;
	}
	.price text{
		margin-left: 30upx;
		color: #55A0FF;
		font-size: 28upx;
		text-align: 60upx;
		font-weight: bold;
	}
	.xg{
		width: 750upx;
		height: 40upx;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
	}
	.xg-item{
		width: 50%;
		height: 40upx;
		display: flex;
		flex-direction: row;
		justify-content:center 
	}
	.xg-item:first-child image{
		width: 18upx;
		height: 24upx;
		margin-top: 5upx;
	}
	.xg-item:last-child image{
		width: 24upx;
		margin-top: 6upx;
		height: 22upx;
	}
	.xg-item text{
		font-size: 24upx;
		color: #B6B6B6;
		margin-left: 20upx;
	}
	.peisong{
		margin-top: 10upx;
		width: 750upx;
		line-height: 60upx;
		height: 60upx;
		background: #FFFFFF;
		padding: 40upx 0 20upx 0;
	}
	.label{
		font-size: 26upx;
		color: #999999;
		margin-left: 24upx;
		float: left;
		
	}
	.peisong-info{
		width: 406upx;
		margin-left: 150upx;
		height: 30upx;
		display: flex;
		flex-direction: row;
		justify-content:space-between
	}
	.peisong-info text{
		color: #333333;
		font-size: 28upx;
	}
	.shu{
		width: 2upx;
		margin-top: 8upx;
		background: #999999;
		height: 24upx;
	}
	
	.youhui{
		margin-top: 4upx;
		width: 750upx;
		height: 60upx;
		line-height: 60upx;
		padding: 10upx 0 20upx 0; 
		background: #FFFFFF;
	}
	.youhui-info{
		width: 406upx;
		margin-left: 150upx;
		height: 30upx;
		padding-top: 14upx;
	}
	.youhui-item{
		width: 119upx;
		height: 30upx;
		border:#54B1FF solid 1upx;
		border-radius: 20upx;
		font-size: 24upx;
		text-align: center;
		line-height: 30upx;
		color: #54B1FF;
	}
	.size{
		margin-top: 10upx;
		width: 750upx;
		height: 120upx;
		line-height: 60upx;
		background: #FFFFFF;
		padding: 40upx 0;
	}
	.cm{
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		float: left;
		margin-left: 80upx;
	}
	.cm-more{
		float: right;
		margin-right: 20upx;
		width: 20upx;
		margin-top: 14upx;
		height: 20upx;
		min-width: 15px;
		min-height: 15px;
	}
	.size-list{
		width: 595upx;
		float: right;
		margin-top: 20upx;
		
		display: flex;
		flex-direction: row;
	}
	.size-list image{
		width: 40upx;
		height: 40upx;
		
		margin-right: 15upx;
		border-radius: 4upx;
	}
	.size-list text{
		font-size: 24upx;
		color: #999999;
		height: 40upx;
		line-height: 40upx;
	}
	.shop{
		width: 750upx;
		height: 150upx;
		margin-top: 10upx;
		background: #FFFFFF;
		padding: 40upx 0;
	}
	.shop-img{
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin-left: 40upx;
		float: left;
	}
	.shop-info{
		width: 600upx;
		float: right;
	}
	.shop-name{
		font-size: 32upx;
		margin-left: 20upx;
		float: left;
	}
	.shop-tip{
		font-size: 24upx;
		width: 89upx;
		height: 26upx;
		background: #F2481B;
		border-radius: 20upx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 10upx;
		margin-left: 20upx;
		line-height: 26upx;
		float: left;
	}
	.shop-btn{
		width: 128upx;
		height: 38upx;
		border: #54B1FF solid 1px;
		margin-top: 30upx;
		border-radius: 20upx;
		color: #54B1FF;
		font-size: 24upx;
		float: right;
		position: absolute;
		right: 20upx;
		text-align: center;
		line-height: 38upx;
	}
	.shop-tip-list{
		width: 750upx;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		margin-top: 120upx;
	}
	.shop-tip-item{
		width: 300upx;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.bbms{
		font-size: 24upx;
		color: #999999;
	}
	.fen{
		font-size: 24upx;
		margin-left: 20upx;
		color: #ff8d00;
	}
	.gao{
		width: 30upx;
		height: 30upx;
		background: #FBDDD5;
		border-radius: 50%;
		text-align: center;
		margin-left: 20upx;
		line-height: 30upx;
		color: #F2481B;
		font-size: 24upx;
		margin-top: 6upx;
	}
	.di{
		width: 30upx;
		height: 30upx;
		background: #EDEBEB;
		border-radius: 50%;
		text-align: center;
		margin-left: 20upx;
		line-height: 30upx;
		color: #999999;
		font-size: 24upx;
		margin-top: 6upx;
	}
	
	.stars{
		float: left;
		width: 200upx;
		height: 30upx;
		margin-top: 60upx;
		position: absolute;
		margin-left: 16upx;
	}
	.stars image{
		width: 22upx;
		float: left;
		margin-left: 10upx;
		height: 20upx;
	}
	.list-title{
		width: 100%;
		padding: 30upx 20upx;
		background: #FFFFFF;
		margin-top: 4upx;
		height: 8vw;
		
	}
	.list-title span{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.goodsInfo{
		width: 750upx;
		height: auto;
	}
	.goodsInfo image{
		width: 750upx;
		margin-top: -20upx;
	}
	
	.pingjia{
		width: 750upx;
		height: auto;
		padding: 40upx 0;
		background: #FFFFFF;
		margin-top: 10upx;
	}
	.pingjia-head{
		width: 750upx;
		height: 46upx;
	}
	.pingjia-label{
		font-size: 26upx;
		float: left;
		margin-left: 30upx;
	}
	.seeAll{
		font-size: 26upx;
		color: #55A0FF;
		margin-top: 2upx;
		float: right;
	}
	.pingjia uniIcon{
		float: right;
	}
	.pinglun-user{
		width: 750upx;
		height: 46upx;
		margin-top: 20upx;
	}
	.pinglun-user image{
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		float: left;
		margin-left: 30upx;
	}
	.pinglun-user text{
		font-size: 24upx;
		margin-left: 20upx;
		line-height: 46upx;
	}
	.pinglun-text{
		padding: 20upx ;
		display: block;
		width: 670upx;
		
		margin-left: 30upx;
		font-size: 26upx;
	}
	
	/* 底部 */
	.bottom{
		width: 750upx;
		height: 98upx;
		position: fixed;
		bottom:0;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
	}
	.bottom-item{
		width: 110upx;
		height: 98upx;
	}
	.bottom-item text{
		font-size: 24upx;
		text-align: center;
		width: 110upx;
		height: 38upx;
		line-height: 38upx;
		display: block;
		color: rgba(102,102,102,1.00);
	}
	.bottom-img{
		width: 110upx;
		height: 50upx;
		margin-top: 6upx;
		text-align: center;
	}
	.bottom-img:nth-child(1) image{
		width: 36upx;
		height: 32upx;
	}
	.bottom-img:nth-child(2) image{
		width: 35upx;
		height: 33upx;
	}
	.bottom-img:nth-child(3) image{
		width: 37upx;
		height: 34upx;
	}
	.bottom-btn-1{
		width: 210upx;
		height: 98upx;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 26upx;
		line-height: 98upx;
		text-align: center;
		background: #55A0FF;
	}
	.bottom-btn-2{
		width: 210upx;
		height: 98upx;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 26upx;
		line-height: 98upx;
		text-align: center;
		background: #F8661C;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
	
	.goods-list{
		width: 710upx;
		margin-left: 20upx;
		margin-right: 20upx;
		/* height: calc(100vh - 240px); */
		/* overflow: scroll; */
		height: auto;
		margin-bottom: 100upx;
		display: table;
	}
	
	.goods-item{
		width: 338upx;
		height: 515upx;
		margin-top: 24upx;
		position: relative;
	}
	.goods-item:nth-child(even){
		float: left;
	}
	.goods-item:nth-child(odd){
		float: right;
	}
	.goods-item .item-img{
		width: 338upx;
		height: 336upx;
		border-radius: 15upx 15upx 0 0;
	}
	.goods-item .goods-title{
		padding-left: 24upx;
		padding-right: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: PingFang SC Regular;
		font-size: 26upx;
		font-weight: bold;
	}
	.goods-prize{
		height: 38upx;
		color: #55A0FF;
		float: left;
		font-size: 30upx;
		margin-top: 50upx;
		margin-left: 24upx;
		text-align: left;
	}
	.p-dot{
		font-size: 26upx;
	}
	.goods-buyNum{
		width: 200upx;
		float: right;
		text-align: right;
		font-size: 25upx;
		color: #999999;
		margin-right: 24upx;
		margin-top: 56upx;
	}
	.other-btn{
		width: 49upx;
		height: 29upx;
		background: rgba(0,0,0,0.5);
		z-index: 10;
		right: 9upx;
		top:9upx;
		border-radius: 15upx;
		display: flex;
		flex-direction: row;
		position: absolute;
		justify-content: center;
	}
	.other-btn-dot{
		width: 6upx;
		height: 6upx;
		margin-left: 2upx;
		margin-right: 2upx;
		margin-top: 11upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.item-btns{
		position: absolute;
		width: 338upx;
		height: 455upx;
		padding-top: 60upx;
		border-radius: 15upx;
		z-index: 8;
		background: rgba(0,0,0,0.5);
	}
	.item-btns image{
		width: 36upx;
		height: 36upx;
		margin-top: 10upx;
		margin-right: 10upx;
	}
	.item-btn{
		width: 260upx;
		height: 60upx;
		background: #FFFFFF;
		border-radius: 50upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.item-btn text{
		font-size: 26upx;
		color: #333333;
		line-height: 60upx;
	}
	.c-title{
		width: 750upx;
		height: 60upx;
		
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		justify-content: center;
	}
	.c-title text{
		font-size: 28upx;
		margin-left: 40upx;
		margin-right: 40upx;
		color: #010101;
		font-weight: bold;
	}
	.c-title image{
		margin-top: 15upx;
		width: 81upx;
		height: 15upx;
	}
</style>
